<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 个人主页
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="70">
                <!--<el-col :span="5">
                    <p>dsd</p>
                </el-col>-->
                <el-col :span="15">
                    <el-card shadow="hover" class="mgb20" style="height:max-content;">
                        <el-button style="float: right; padding: 3px 0" type="text" @click="showEditDialog">修改个人信息</el-button>

                        <div class="user-info">
                            <img src="../../assets/img/img.jpg" class="user-avator" alt />
                            <div class="user-info-cont">
                                <div class="user-info-name">{{tableData.nickname}}</div>
                                <!--                            <div>{{role}}</div>-->
                            </div>
                        </div>
                        <div class="user-info-list">
                            邮  箱：
                            <span>{{ tableData.email }}</span>
                        </div>
                        <div class="user-info-list">
                            昵  称：
                            <span>{{ tableData.nickname }}</span>
                        </div>
                        <div class="user-info-list">
                            描  述：
                            <span>{{ tableData.descri }}</span>
                        </div>
                        <div class="user-info-list">
                            电  话：
                            <span>{{ tableData.phone }}</span>
                        </div>
                        <el-dialog title="修改我的信息" :visible.sync="dialogFormVisible">
                            <el-form :model="editform">
                                <el-form-item label="邮箱：" :label-width="formLabelWidth">
                                    <el-input v-model="tableData.email" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="昵称：" :label-width="formLabelWidth">
                                    <el-input v-model="tableData.nickname" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="描述：" :label-width="formLabelWidth">
                                    <el-input v-model="tableData.descri" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="电话号：" :label-width="formLabelWidth">
                                    <el-input v-model="tableData.phone" clearable></el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="handleCancel()">取 消</el-button>
                                <el-button type="primary" @click="handleEdit()">确 定</el-button>
                            </div>
                        </el-dialog>
                    </el-card>
                </el-col>
                <el-col :span="9">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-1">
                            <i class="el-icon-lx-people grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">{{ this.character_num }}</div>
                                <div>角色数量</div>
                            </div>
                        </div>
                    </el-card>

                    <el-card style="margin-top: 50px" shadow="hover" :body-style="{padding: '0px'}">
                        <div  class="grid-content grid-con-3">
                            <i class="el-icon-lx-goods grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">{{ this.gameFinish }}</div>
                                <div>游戏次数</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>



                <!--<el-col :span="16">
                    <el-row :gutter="20" class="mgb20">
                        <el-col :span="12">
                            <el-card shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-1">
                                    <i class="el-icon-lx-people grid-con-icon"></i>
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{ this.comment_num }}</div>
                                        <div>评价数量</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-3">
                                    <i class="el-icon-lx-goods grid-con-icon"></i>
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{ this.character_num }}</div>
                                        <div>角色数量</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>-->
                    </el-row>
                    <el-card shadow="hover" style="height:403px;">
                        <div slot="header" class="clearfix">
                            <span>角色</span>
                        </div>
                        <el-table :data="Character.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width:100%;">
                            <el-table-column
                                prop="cid"
                                label="角色编号"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="c_name"
                                label="角色姓名"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                label="年龄"
                                align="center"
                                prop="age">
                            </el-table-column>
                            <el-table-column
                                label="性别"
                                align="center"
                                prop="sex">
                            </el-table-column>
                            <el-table-column
                                label="时代"
                                align="center"
                                prop="time">
<!--                                <template slot-scope="scope">-->
<!--                                    <el-button @click="toRole(scope.row)" type="text" size="small">查看</el-button>-->
<!--                                </template>-->
                            </el-table-column>
                        </el-table>

                        <div style="text-align: center;margin-top: 30px;">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                                :page-size="pagesize"
                                :total="totalcharacters"
                                layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import axios from 'axios'

export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('nickname'),
            tableData: {},
            Comment: [],
            Character: [
                {
                    characterid: 1,
                    name:'xzc',
                    getseminarstaken: "string",
                    iselligibletoenroll: "string",
                    state: 0,
                    userid: 0
                },
                {
                    characterid: 2,
                    name:'xzh',
                    getseminarstaken: "string",
                    iselligibletoenroll: "string",
                    state: 0,
                    userid: 0
                }
            ],
            comment_num:0,
            character_num:0,
            gameFinish:0,
            totalcomments: 0,
            totalcharacters: 0,
            pagesize: 10,
            currentPage: 1,
            dialogFormVisible: false,

            userid: null,

            infoUser: {
                userid: localStorage.getItem('uid')
            },

            editform: {
                descri:'',
                uid:0,
                nickname:'',
                email:'',
                phone:'',
            },

            formLabelWidth: '120px',
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    created() {
        this.init();
        this.editform.uid=localStorage.getItem('uid');
    },
    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        init() {
            axios({
                methods: 'get',
                url: axios.defaults.baseURL + 'userInfo',
                params: this.infoUser
            }).then((res) => {
                // this.$message.success("接收到了信息")
                console.log(res)
                if (res.data.code === '000000') {
                    this.tableData = res.data.content;
                  /*  this.Comment = res.data.content.commentUserList;
                    this.Character = res.data.content.characterList;*/

                    this.comment_num = this.Comment.length;
                    this.character_num = this.Character.length;
                    this.gameFinish = res.data.content.gameFinish;
                    this.editform.descri = res.data.content.descri
                    this.editform.email = res.data.content.email
                    this.editform.phone = res.data.content.phone
                    this.editform.nickname = res.data.content.nickname
                    localStorage.setItem('nickname',this.editform.nickname);
                    localStorage.setItem('email',this.editform.email);
                    this.gameFinish=res.data.content.game_num;
                    /* this.totalcommentts=res.data.total1;//评论部分信息个数赋给totalcomments
                     this.totalcharacters=res.data.total2;//角色部分信息个数赋给totalcharacters*/
                } else {
                    this.$message.error(res.data.desc)
                }
            })
            axios({
                methods: 'get',
                url: axios.defaults.baseURL + 'Character/getAllList/'+localStorage.getItem('uid'),
                params: this.infoUser
            }).then((res) => {
                // this.$message.success("接收到了信息")
                console.log(res)
                if (res.data.code === '000000') {
                    this.Character=res.data.content;
                } else {
                    this.$message.error(res.data.desc)
                }
            })
            // axios({
            //     methods: 'get',
            //     url: axios.defaults.baseURL + 'Character/getAllList/'+localStorage.getItem('uid'),
            // }).then((res) => {
            //     if (res.data.code === '000000') {
            //         this.
            //     } else {
            //         this.$message.error(res.data.desc)
            //     }
            // })
        },
        showEditDialog() {
            this.dialogFormVisible = true
            axios.get(axios.defaults.baseURL + 'userInfo').then((res) => {
                this.editform.descri = res.data.content.descri
                this.editform.email = res.data.content.email
                this.editform.phone = res.data.content.phone
                this.editform.nickname = res.data.content.nickname
                this.editform.wechatid = res.data.content.wechatid
                localStorage.setItem('nickname',this.editform.nickname);
                localStorage.setItem('email',this.editform.email);
            });
        },
        async handleEdit() {  //编辑
            this.editform.phone=this.tableData.phone
            this.editform.email= this.tableData.email
            this.editform.descri=this.tableData.descri
            this.editform.nickname=this.tableData.nickname

            axios({
                method: 'get',
                url: axios.defaults.baseURL + 'userModify',
                params: this.editform
            }).then(res => {
                if (res.data.code === '000000') {

                    this.dialogFormVisible = false;
                    this.init()
                    this.$notify({
                        title: '修改成功',
                        message: '请刷新页面后查看修改结果',
                        type: 'success'
                    });
                }else{
                    this.$message.error(res.data.desc)
                }

            })
        },
        handleCancel(index, row) {  //取消
            this.init();
            this.editform.uid=localStorage.getItem('uid');
            this.dialogFormVisible = false;
        },
        handleSizeChange: function (val) {
            this.pagesize = val;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        toRole(info){
            this.$router.push('/CreateCharacter');
           /* this.$router.push({path:'/CreateCharacter',params:{info.characterid}});*//*带参数跳转 创建角色界面引用这个params里面内容就是characterid*/
            alert(info.characterid)
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
